import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'

export default class Header extends Component {

  static propTypes = {
    addTodo: PropTypes.func.isRequired
  };

  handleKeyUp = (event) => {
    const {keyCode, target} = event;

    //判断是否为回车
    if (keyCode !== 13) return false;
    // console.log(target.value);
    //判断必须有值
    if (target.value.trim() === '') {
      alert('请先输入内容');
      return false;
    }

    //执行添加
    this.props.addTodo({
      id: nanoid(),
      name: target.value,
      done: false
    });

    //清空
    target.value = '';
  }

  render() {
    return <input type="text" onKeyUp={this.handleKeyUp} className="input" placeholder="请输入内容,回车添加！"/>
  }

}